import React, { useContext, useEffect, useCallback, useState } from 'react'
import { postAccOverallSelectedBacklog } from '../../financialApi'
import AllTodoAction from './components/AllTodoAction'
import HangUpTodoAction from './components/HangUpTodoAction'
import SelectModule from './components/SelectModule'
import {
    myContext
} from '../../../../reducer'
import {
    todoListType
} from '../../../../assets/enum'
import { TodoListAll } from './style'
import { message, PageHeader, Table } from 'antd'

/**
 * @description: 代办事项
 * @author: xiaoxujs
 * @update: xiaoxujs(2021-7-5)
 */

const TodoList = () => {
    const { state } = useContext(myContext)
    const [listData, setListData] = useState([])
    const [total, setTotal] = useState(0)
    const [currentPage, setCurrentPage] = useState(1)
    const [size, setSize] = useState(10)
    const [loading, setLoading] = useState(false)
    const [selectData, setSelectData] = useState({})
    const listFun = useCallback(
        (parames = {
            currentPage: 1,
            size: 10
        }) => {
            setLoading(true)
            parames.taskStatus = state.todoListType
                ; (async () => {

                    const { code, msg, data } = await postAccOverallSelectedBacklog(parames)
                    if (code === '20000') {
                        setListData(data.records)
                        setTotal(data.total)
                        setCurrentPage(parames.currentPage)
                        setSize(parames.size)
                        setLoading(false)
                    } else {
                        message.error(msg)
                    }
                })()
        },
        [state.todoListType],
    )
    useEffect(() => {
        listFun()
    }, [listFun])
    //分页
    const pagination = {
        //是否可以改变pagesize//
        showSizeChanger: true,
        //是否可以快速跳转到某页
        showQuickJumper: true,
        //展示一共有多少条数据//
        showTotal: () => `共${total}条`,
        //每页条数
        pageSize: size,
        //当前页数
        current: currentPage,
        //数据总数
        total: total,
        //pageSize 变化的回调
        onShowSizeChange: (current, pageSize) => changePageSize(pageSize, current),
        //页码改变的回调，参数是改变后的页码及每页条数
        onChange: (current) => changePage(current),
    }
    //改变每页条数
    const changePageSize = (pageSizeFun, current) => {
        const page = {
            currentPage: current,
            size: pageSizeFun
        }
        const parames = Object.assign(selectData, page)
        listFun(parames);
    }
    //改变页数
    const changePage = (current) => {
        const page = {
            currentPage: current,
            size
        }
        const parames = Object.assign(selectData, page)
        listFun(parames);
    }
    //action
    const actionModule = (serialNo, taskId, taskName) => {
        switch (state.todoListType) {
            case 1:
                return <AllTodoAction serialNo={serialNo} taskId={taskId} taskName={taskName} listFun={listFun} />
            case 3:
                return <HangUpTodoAction serialNo={serialNo} listFun={listFun} />
            default:
                break;
        }
    }
    // 搜索
    const handleSelect = (values) => {
        values.taskStatus = state.todoListType
        values.currentPage = 1
        values.size = 10
        setSelectData(values)
        listFun(values)

    }
    const columns = [
        {
            title: '编号',
            render: (text, recode, index) => <span>{index + 1}</span>
        },
        {
            title: '业务流水号',
            dataIndex: 'serialNo'
        },
        {
            title: '申请人',
            dataIndex: 'applicant'
        },
        {
            title: '经办人',
            dataIndex: 'agentName'
        },
        {
            title: '创建时间',
            dataIndex: 'createTime'
        },

        {
            title: '审批事项',
            dataIndex: 'model',
            render: (text, recode) => <span>{recode.model.describe}</span>
        },
        {
            title: '申请金额',
            dataIndex: 'money'
        },
        {
            title: '申请事由',
            dataIndex: 'matter'
        },
        {
            title: '当前阶段',
            dataIndex: 'taskName'
        },
        {
            title: '操作',
            render: (text, recode) => <>
                {actionModule(recode.serialNo, recode.taskId, recode.taskName)}
            </>
        },
    ];
    return <TodoListAll>
        <PageHeader
            className="site-page-header"
            title={todoListType[state.todoListType]}
        />
        <SelectModule listFun={listFun} handleSelect={handleSelect} />
        <Table
            columns={columns}
            dataSource={listData}
            rowKey='id'
            pagination={pagination}
            loading={loading}
        />
    </TodoListAll>
}

export default TodoList;